<template>
  

    <div class="example-tb">
      <div class="tb">
        <div class="btns" style="margin-bottom: 10px;float:right;height:50px;">
           <el-button
                type="primary"
                class="edit_btn"
                @click.native="getExport"
                style="font-size: 15px; float: right" 
              >
                <i class="el-icon-download"></i
                >&nbsp;&nbsp;&nbsp;导出</el-button
              >
      </div>
    <div class="example-tb">
      <div class="tb">
        <vol-table
          ref="table"
          :columns="columns"
          :max-height="680"
          :columnIndex="false"
          :ck="false"
          :text-inline="false"
          :single="true"
          :tableData="tableData"
          :paginationHide="false"
          @loadBefore="loadTableBefore"
          @loadAfter="loadTableAfter"
           url="/api/sj_review_progress/GetData"
           :override="true"
        ></vol-table>
      </div>
    </div>
      </div>
    </div>
</template>
<script>
import VolForm from "@/components/basic/VolForm.vue";
import VolHeader from "@/components/basic/VolHeader.vue";
//import table2 from "@/views/tables/applyauttable";

import VolTable from "@/components/basic/VolTable.vue";
export default {
  components: {
    VolTable,
    VolHeader,
    VolForm
  },
  methods: {
    btnSeach() {
      this.$refs.table.load();
    },
    getExport() {
      var param = {};
      console.log('*****************')
      this.http
        .post("/api/sj_review_progress/ExportFile", param, true, {
          responseType: "blob",
        })
        .then((result) => {
          let now = new Date();
          let year = now.getFullYear(); //获取完整的年份(4位,1970-????)
          let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
          let today = now.getDate(); //获取当前日(1-31)
          let hour = now.getHours(); //获取当前小时数(0-23)
          let minute = now.getMinutes(); //获取当前分钟数(0-59)
          let second = now.getSeconds(); //获取当前秒数(0-59)

          const elink = document.createElement("a");
          elink.download = year +""+ month +""+ today +""+ hour +""+ minute +""+ second;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(result);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href);
          document.body.removeChild(elink);
        });
    },
    loadTableBefore(param, callBack) {
     // console.log("加载数据前", param);
      //生成查询条件
     
      callBack(true); //此处必须进行回调，返回处理结果，如果是false，则不会执行后台查询
    },
    loadTableAfter(data, callBack) {
      //此处是从后台加数据后，你可以在渲染表格前，预先处理返回的数据
    //  console.log("加载数据后" , data);
      callBack(true); //同上
    },
  },
  mounted() {
  },
  data() {
    return {
      loadKey: true,
      searchFields: {
        sq_sj: "",
        sh_sj: "",
        shzt: "",
      },
      currentRow: "",
      pageindex: 1,
      pagesize: 30,
      total:0,
      width: "90%",
      title: "测试",
      detailParams: "",
      text: "",
      tableData: [],
      columns: [
        //表配置
        {
          field: "id", //数据库表字段,必须和数据库一样，并且大小写一样
          type: "string", //数据类型
          isKey: true, //是否为主键字段
          width: 80, //表格宽度
          hidden: true, //是否显示
          readonly: true,
          require: true,
          align: "left", //文字显示位置left、center
        },
        {
          field: "idx",
          title: "序号",
          type: "string",
          width: 50,
          align: "center",
        },
        {
          field: "citymc",
          title: "地市名称",
          type: "string",
          width: 70,
          align: "center",
        },
        {
          field: "xzqcount",
          title: "区县个数",
          type: "string",
          width: 70,
          align: "center",
        },
        {
          field: "ysqqxcount",
          title: "已提交区县个数",
          type: "string",
          width: 70,
          align: "center",
        },
        {
          field: "wsqqxcount",
          title: "未申请区县个数",
          type: "string",
          width: 70,
          align: "center",
        },
        {
          field: "sqcount",
          title: "共提交次数",
          type: "string",
          width: 70,
          align: "center",
        },
        {
          field: "jycount",
          title: "交验个数",
          type: "string",
          width: 70,
          align: "center",
        },
        {
          field: "tgcount",
          title: "通过预审区县个数",
          type: "string",
          width: 70,
          align: "center",
        },
        {
          field: "nopasscount",
          title: "不通过预审区县个数",
          type: "string",
          width: 70,
          align: "center",
          
        },

        {
          field: "tgl",
          title: "通过率",
          type: "string",
          width: 60,
          align: "center",
        }
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.example-tb {
  padding: 15px;
}
.tb {
  margin-top: 15px;
}
.v-header {
  background: white;
  padding: 10px;
}
.t-dis {
  margin-bottom: 15px;
  background: white;
}
.t-dis ::v-deep(.example-tb .el-alert) {
  display: none;
}
.t-dis ::v-deep(.example-tb .tb) {
  margin-top: 0 !important;
}
.t-dis ::v-deep(.example-tb .search-info) {
  margin-left: -19px;
}
.el-row {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.edit_btn {
  min-height: 40px;
  min-width: 100px;
  background: #409eff 80%;
  border: #409eff;
  font-size: 20px;
}
</style>
